<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>冲浪网站</title>
    <link rel="stylesheet" href="首页.css">
</head>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

    $(document).ready(
        function () {
            $('#img1').click(function () {
                if ($(this).attr('src').endsWith('图片11.png')) {
                    $(this).attr('src', '图片12.png');
                } else {
                    $(this).attr('src', '图片11.png');
                }
            });
        }
    );

    function search() {
        // 获取搜索框元素，这里使用id选择器因为元素具有id="x1"
        var inputElement = document.getElementById('x1');
        // 获取输入的查询字符串并去除首尾空格
        var query = inputElement.value.trim(); // 使用trim()方法去除首尾空格
        // 检查查询字符串是否为空
        if (query !== '') {
            // 如果查询字符串不为空，编码查询字符串并重定向到搜索页面
            window.location.href = 'search.html?query=' + encodeURIComponent(query);
        } else {
            // 如果查询字符串为空，则提示用户
            alert('请输入搜索内容');
        }
    }

    // 为搜索框添加键盘事件监听器，以便在用户按下Enter键时触发搜索
    document.getElementById('x1').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            search(); // 执行搜索函数
        }
    });


    $(document).ready(
        function () {
            $('#img2').click(function () {
                var newImage = $('<img>').attr({
                    src :'图片13.png',
                    alt: ''
                });
                $('#img1').after(newImage);
            });
        }
    );  

</script>

<body>
    <header>
        <img class="a2" src="logo.png" alt="错误">
        <a href="首页.html">
            <img class="a1" src="首页.png" alt="错误">
        </a>
        <a href="热门.html">
            <img class="a1" src="热门.png" alt="错误">
        </a>
        <a href="视频.html">
            <img class="a1" src="视频.png" alt="错误">
        </a>
        <a href="话题.html">
            <img class="a1" src="话题.png" alt="错误">
        </a>
        <a href="register.html">
            <img class="a3" src="注册.png" alt="错误">
        </a>
        <a href="login.html">
            <img class="a4" src="登录.png" alt="错误">
        </a>
        
    </header>
    <hr>



    <div class="a8" >
            <img class="a7" src="搜索.png" alt="错误">
            <input type="text" id="x1" placeholder="请输入想要搜索的内容" class="a5">
            <button onclick="search()" class="a6" >搜索</button>
            <video loop="loop" autoplay="autoplay" preload="" muted="muted" src="https://a.sinaimg.cn/mintra/pic/2112130543/weibo_login.mp4" poster="https://a.sinaimg.cn/mintra/pic/2112130400/18weibo_login.png" class="video"  width="100%" height="100%"> 抱歉，您的浏览器不支持内嵌视频 </video>


        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <div class="left">
        <div class="b1">首页</div>
        <div class="b2">
            <div> · 最新资讯</div>
            <br>
            <div> · 热门搜索</div>
            <br>
            <div> · 推荐资讯</div>
            <br>
            <div> · 特别关注</div>
        </div>
    </div>
    <div class="center">
        <img src="图片1.png" alt="">
        <img class="x1" src="图片9.png" alt="">
        <img id="img2" class="x1" src="图片10.png" alt="">
        <img id="img1" class="x1" src="图片11.png" alt="">
        <img src="图片2.png" alt="">
        <img src="图片5.png" alt="">
    </div>
    <div class="right">
        <ul class="b3">
            热门搜索
        </ul>
        <ul class="b4">
            <li>1.与歹徒搏斗民警身中15刀英勇牺牲</li>
            <li>2.女童院内玩耍失踪近三个月 刑警介入</li>
            <li>3.嫦娥六号月背采样面临哪些挑战</li>
            <li>4.马尔代夫决定禁止以色列公民入境</li>
            <li>5.男子称和前女友分手后被骚扰2年</li>
            <li>6.男子拔牙6天后病亡 村医获刑后改判</li>
            <li>7.特朗普称愿入狱：判我有罪的是坏人</li>
            <li>8.吃了“聪明药”变学霸？假的</li>
            <li>9.完败意大利 蔡斌为何不上朱婷？</li>
            <li>10.女子河边下单 外卖小哥施救</li>
        </ul>
        <img src="图片3.png" alt="">
        <br>
        <img src="图片4.png" alt="">
    </div>
</body>

</html>